<template>
  <div class="radius-container">
    <div class="border-b pad-10 font-w font-15 flex topbar-style">
      <label class="flex-item ">任务类型</label>
    </div>
    <div class="pad-20">
      支付密码：******  <el-button class="medium-btn mar-l-17"  type="primary" @click="updatePassword">修改密码</el-button>
    </div>

    <!-- 手机验证码 -->
    <div>
      <el-dialog width="430px" title="修改密码" v-el-drag-dialog :visible.sync="passwordFormVisible" :before-close="handleDialogClose">
        <div style="padding:0 40px;">
          设置密码:<el-input type="password" v-model="password1" style="width:160px;" maxlength="6"></el-input><br/>
          确认密码:<el-input type="password" v-model="password2" style="width:160px;" maxlength="6"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="savePayPassword">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 手机验证码 -->
    <div>
      <el-dialog width="470px" title="修改密码" v-el-drag-dialog :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
        <div style="padding:0 0 0 40px;">
          <div>手机号: {{ phone }}</div>
          <div class="flex v-align-c pad-t-10 width-per-100">
            <div>验证码：</div>
            <el-input type="text" v-model="code" style="width:160px;"></el-input>
            <el-button type="primary" @click="getRiskCode" :disabled="riskDisabled" style="margin-left:20px;">{{btnTxt}}</el-button>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveCodeData">确定</el-button>
        </div>
      </el-dialog>
    </div>


  </div>
</template>
<script>
  import { saveVerifyRiskCode, getEnterprise, checkRiskCode, savePayPassword } from '@/api/user/enterprise'

  export default {
    data() {
      return {
        enterpriseId: this.getEnterpriseId(),
        dialogFormVisible: false,
        passwordFormVisible: false,
        tab_no: '1',
        workInfo: {},
        workId: '',
        phone: '',
        password1: '',
        password2: '',
        time: null,
        btnTxt: '获取验证码',
        riskDisabled: false,
        code: ''
      }
    },
    // 初始化页面
    created() {
      this.getEnterprise()
    },
    methods: {
      updatePassword() {
        this.dialogFormVisible = true
      },
      handleDialogClose() {
        this.dialogFormVisible = false
        this.passwordFormVisible = false
        this.time = null
        this.btnTxt = '获取验证码'
      },
      getEnterprise() {
        const enterpriseId = this.enterpriseId
        getEnterprise(enterpriseId).then(response => {
          this.phone = response.data.phone
        })
      },
      savePayPassword() {
        const password1 = this.password1
        const password2 = this.password2
        if (password1.length > 6) {
          this.$message({ type: 'error', message: '密码不能超过6位数字' })
        }
        if (password1 === password2) {
          const data = {
            enterpriseId: this.enterpriseId,
            payPassword: this.password1,
            checkCode: this.code
          }
          savePayPassword(data).then(response => {
            if (response.isError) return
            this.passwordFormVisible = false
          })
        } else {
          this.$message({ type: 'error', message: '前后密码不一致' })
        }
      },
      saveCodeData() {
        const code = this.code
        const enterpriseId = this.enterpriseId
        const data = {
          checkCode: code,
          enterpriseId: enterpriseId
        }
        checkRiskCode(data).then(response => {
          const ret = response.data.ret
          if (ret === '0') {
            this.dialogFormVisible = false
            this.passwordFormVisible = true
          } else {
            this.$message({ type: 'error', message: '验证码错误' })
          }
        })
      },
      timer() {
        if (this.time > 0) {
          this.time--
          this.btnTxt = this.time + 's后重新获取'
          this.riskDisabled = true
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.btnTxt = '获取验证码'
          this.riskDisabled = false
        }
      },
      getRiskCode() {
        const that = this
        // 获取验证码
        const data = {
          enterpriseId: this.enterpriseId
        }
        saveVerifyRiskCode(data).then(response => {
          if (response.isError) return
          that.time = 60
          that.timer()
          this.$message({
            message: '发送成功！',
            type: 'success'
          })
        })
      }
    }
  }

</script>
<style scoped>
  .form >>> .flex{
    align-items: center;
    margin-top: 10px;
  }
  .flex .el-button{
    /*width: 92px;*/
    /*height: 38px;*/
  }
</style>